<template>
  <div class="common-layout">
    <el-container class="box">
      <el-aside class="left">
        <List></List>
      </el-aside>
      <el-container class="right">
        <el-header class="top">
          <Header></Header>
        </el-header>
        <nav>
          <el-tabs
            v-model="activeTab"
            type="card"
            class="demo-tabs"
            @tab-change="tabChange"
            @tab-remove="removeTab"
          >
            <el-tab-pane
              v-for="item in crumbList"
              :key="item.name"
              :label="item.title"
              :name="item.path"
              :closable="crumbList.length !== 1"
            >
            </el-tab-pane>
          </el-tabs>
        </nav>
        <el-main class="right">
          <div>
            <div class="body">
              <router-view></router-view>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { useRoute, onBeforeRouteUpdate } from "vue-router";
import List from "../Home/List.vue";
import Header from "../Home/Header.vue";
import { ref } from "vue";
import router from "../router";
const route = useRoute();
const activeTab = ref(route.path);
// 默认首页
let crumbList = ref([
  {
    title: "首页",
    path: "/home/body",
  },
]);
// 路由守卫
onBeforeRouteUpdate((to, from) => {
  addTab({
    title: to.meta.title,
    path: to.path,
  });
});
if (localStorage.getItem("crumbList") !== null) {
  initCrumbList();
} else {
  localStorage.setItem("crumbList", JSON.stringify(crumbList.value));
}
function addTab(tab) {
  // 激活标签属性，并设置为当前的路由路径
  activeTab.value = tab.path;
  // 判断面包屑列表里 是否有当前路由路径
  const hasTab = crumbList.value.findIndex((item) => {
    return item.path == tab.path;
  });
  if (hasTab == -1) {
    // 没有 就添加数据
    crumbList.value.push(tab);
    localStorage.setItem("crumbList", JSON.stringify(crumbList.value));
  }
}

// 初始化
function initCrumbList() {
  const tabs = localStorage.getItem("crumbList");
  crumbList.value = JSON.parse(tabs);
}

const tabChange = (target) => {
  router.push(target);
};

//
const removeTab = (target) => {
  const tabs = crumbList.value;
  let curent = activeTab.value;
  //
  if (target == curent) {
    const index = tabs.findIndex((item) => item.path == target);
    if (index !== -1) {
      curent = tabs[index + 1] || tabs[index - 1];
    }
    activeTab.value = curent.path;
  }
  crumbList.value = crumbList.value.filter((item) => item.path !== target);
  localStorage.setItem("crumbList", JSON.stringify(crumbList.value));
};
</script>

<style scoped>
body {
  width: 100%;
  height: 100vh;
  overflow: scroll;
}
.box {
  width: 100%;
  height: 100vh;
  /* overflow: hidden; */
}

.top {
  height: 60px;
  padding: 0;
  background-color: rgb(255, 255, 255);
}
.left {
  /* width: 150px; */
  background: rgb(29, 164, 219);

  height: 100vh;
  /* float: left; */
}
.left::-webkit-scrollbar {
  height: 10px;
  width: 5px;
}
.right {
  width: 100%;
  height: 100%;
  padding-bottom: 16px;

  overflow: auto;
  background-color: rgb(245, 245, 245);
}
/* 滚动条整体 */
.right::-webkit-scrollbar {
  height: 10px;
  width: 5px;
}
nav {
  height: 50px;
  /* position: absolute; */
  top: 0;
  /* background-color: aqua; */
}
.body {
  /* background-color: rgb(255, 255, 255); */
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}
</style>
